<template>
	<view>
		<view class="head">
			<view class="left">
				<text class="text1">{{money}}</text>
				<text class="text2">余额 (元)</text>
			</view>
			<view style="color: #313131;">|</view>
			<view class="right" @click="withdrawal">
				<image src="../../static/icon/tixian.png"></image>
				<text class="text2">去提现</text>
			</view>
		</view>
		<view class="tab">
			<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">待结算</view>
			<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">已结算</view>
			<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">收支明细</view>
		</view>
		<view class="content" v-if="navIndex==1">
			<view class="item">
				<view class="text3">
					<text>购买商品</text>
					<text style="margin-right: 30rpx;">+152.00</text>
				</view>
				<view class="text4">2021.03.31 09:30</view>
			</view>
			<view class="item">
				<view class="text3">
					<text>购买商品</text>
					<text style="margin-right: 30rpx;">+152.00</text>
				</view>
				<view class="text4">2021.03.31 09:30</view>
			</view>
		</view>
		<view class="content" v-if="navIndex==2">
			<view class="item">
				<view class="text3">
					<text>购买商品</text>
					<text style="margin-right: 30rpx;">+152.00</text>
				</view>
				<view class="text4">2021.03.31 09:30</view>
			</view>
		</view>
		<view class="content" v-if="navIndex==3">
			<view class="item">
				<view class="text3">
					<text>提现到支付宝</text>
					<text style="margin-right: 30rpx;">+152.00</text>
				</view>
				<view class="text4">2021.03.31 09:30</view>
			</view><view class="item">
				<view class="text3">
					<text>购买商品</text>
					<text style="margin-right: 30rpx;">+152.00</text>
				</view>
				<view class="text4">2021.03.31 09:30</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
			money:264564.56,
			navIndex:2
		}
	},
	methods:{
		checkIndex(index){
		   this.navIndex = index  
		},
		//跳转至提现
		withdrawal(e){
			console.log("111")
			uni.navigateTo({
				url:"../tixian/tixian"
			})
		}
	}
}
</script>
<style>
	.head {
		width: 750rpx;
		height: 180rpx;
		background: #FEB140;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.left{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 96rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1A1A1A;
	}
	.text1 {
		font-size: 40rpx;
	}
	.text2 {
		font-size: 24rpx;
	}
	.right {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 149rpx;
		line-height: 60rpx;
	}
	.right image {
		width: 50rpx;
		height: 46rpx;
	}
	.tab {
		width: 599rpx;
		margin: 30rpx 69rpx 33rpx 82rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		justify-content: space-between;
	}
	.activite{
	    font-weight: bold;
	    border-bottom: 6rpx solid #FEB140;
	  }
	.content {
	  	width: 690rpx;
	  	margin-left: 30rpx;
	  	display: flex;
	  	flex-direction: column;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
	}
	.item {
		width: 690rpx;
		line-height: 50rpx;
		border-bottom: 1px solid #E5E5E5;
	}
	.text3 {
		font-size: 28rpx;
		color: #1A1A1A;
	    display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.text4 {
		font-size: 24rpx;
		color: #666666;
	}
</style>
